﻿@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@section css {
    <link href="~/Assets/css/searchmodal.css" rel="stylesheet" />
    <style>
        .uncomplete {
            color: yellow;
        }

        .IsNormal {
            color: blue;
        }

        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            top: 44px;
            height: auto;
        }
    </style>
}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a id="menu-btn" class="mui-action-menu mui-icon mui-icon-search mui-pull-right"></a>
    <h1 class="mui-title" style="color:white;">问题台账</h1>
</header>
<div class="mui-content" ng-controller="HiddenTroubleController" ng-init="SearchModel={};">
    <div id="pullrefresh" class="mui-scroll-wrapper">
        <div class="mui-scroll" id="checklist">
            <ul class="mui-table-view mui-table-view-chevron mui-table-view-striped mui-table-view-condensed" ng-cloak ng-init="
                GetHiddenTroublePageList(SearchModel,1);
                InitHiddenTroubleListPage(2);
                GetFactoryArea();
                  GetSourceList();
                ">
                <li class="mui-table-view-cell" ng-repeat="x in HiddenTroubleList" id="{{x.FormId}}">
                    <div style="position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%);">
                        <span class="mui-icon mui-icon-more"></span>
                    </div>
                    <div class="mui-slider-right mui-disabled">

                        <a class="mui-btn mui-btn-blue mui-icon mui-icon-search" href="MHiddenTroubleDetail?FormId={{x.FormId}}"></a>
                        <a ng-if="@ViewBag.IsModify=='1'|| (x.State==0 && x.CreateUser == User.UserNo)" href="MHiddenTroubleEdit?FormId={{x.FormId}}&pagename=MHiddenTroubleList" class="mui-btn mui-btn-yellow mui-icon mui-icon-compose"></a>
                        <button ng-if="@ViewBag.IsDelete=='1'" class="mui-btn mui-btn-red mui-icon mui-icon-trash" ng-click="DeleteCheckForm(x.FormId);"></button>
                    </div>
                    <div class="mui-table mui-slider-handle" ng-class="{'IsException':x.IsException}">
                        <div class="mui-table-cell mui-col-xs-10" ng-class="{'IsException':x.IsNormal}">
                            <h4 class="mui-ellipsis">{{$index+1}}.<span ng-show="x.PlaceName!=''">{{x.PlaceName}}</span><span ng-show="x.Location!=''&& x.PlaceName==''">{{x.Location}}</span></h4>
                            <p>单号：{{x.FormNo}}</p>
                            <p>来源：{{x.SourceName}}</p>
                            <p>登记人：{{x.CreateUserName}}</p>
                            <h5 class="mui-ellipsis">责任部门：{{x.DepartmentName}}</h5>
                            <h5 class="mui-ellipsis">责任人：{{x.EmployeeName}}</h5>
                            <p class="mui-h6 mui-ellipsis">状态：{{x.StateName}}</p>
                            <p>问题内容：{{x.Description}}</p>
                        </div>
                        <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                            <span class="mui-h5">{{x.CheckTime|JSONDate:'MM-dd'}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="menu-wrapper" class="menu-wrapper hidden" ng-init="">
        <div id="menu" class="menu">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>园区</label>
                    <select ng-model="SearchModel.FactoryAreaId" ng-change="GetHiddenTroublePageList(SearchModel,1);">
                        <option value="">所有园区</option>
                        <option ng-repeat="x in FactoryArea" value="{{x.Id}}">{{x.ParkName}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>来源</label>
                    <select ng-model="SearchModel.SourceId" ng-change="GetHiddenTroublePageList(SearchModel,1);" class="form-control">
                        <option value="">所有来源</option>
                        <option ng-repeat="x in SourceList" value="{{x.Id}}">{{x.Source}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>单号/描述</label>
                    <input type="text" ng-model="SearchModel.Content">
                </div>
                <div class="mui-button-row">
                    <button type="button" onclick="toggleMenu();" ng-click="GetHiddenTroublePageList(SearchModel,1);" class="mui-btn mui-btn-primary">查询</button>
                </div>
            </form>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
</div>
@section js{
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/js/pg/MHiddenTrouble.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>

    <script>
        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });
        mui.showLoading("正在加载..", "div");
        setTimeout(function () {
            mui.hideLoading();
        }, 2000);

        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        //document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function () {
            toggleMenu();
            info.innerHTML = '你已选择：' + this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function () {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function () {
                busying = false;
            }, 500);
        }
    </script>
}
